<template>
    <div class="body">
        <!-- 轮播图 -->
        <div class="body_one">
            <ImgLb/>
        </div>
        <div class="body_two">
            <div>
                <el-menu
                        mode="horizontal"
                        class="el-menu-demo"
                        :default-active="ZhuagnTai"
                    >
                    <el-menu-item index="1">
                        <router-link to="/look">展示文章</router-link>
                    </el-menu-item>
                    <el-menu-item index="2">
                        <router-link to="/add">发表文章</router-link>
                    </el-menu-item>
                    <el-menu-item>
                        <a @click="GoBeautiful">精彩图片</a>
                    </el-menu-item>
                </el-menu>
            </div>
        </div>
    </div>
</template>
<script>
import {Look} from '../LookZhang/Look.vue'
import { ref, watch } from 'vue'
import {useRoute, useRouter} from 'vue-router'
// 轮播图的组件
import ImgLb from '@/components/ImgLb/ImgLb.vue'
// 提示
import {ElLoad} from '@/Element-api/ElLoading.js'
export default {
    components:{
        Look,
        ImgLb
    },
    setup(){
        // 使用路由
        const route = useRoute()
        const router = useRouter()
        let ZhuagnTai = ref('')
        // 当页面刷新之后，判断当前的路径是啥，然后进行赋值
        if(route.path === '/add'){
            ZhuagnTai.value = '2'   
        }else if(route.path === '/look'){
            ZhuagnTai.value = '1'
        }
        // 监听事件,监听route.path的变化
        watch(()=>route.path,(newPath,oldPath)=>{
            // 产生的新的路由进行判断,进行赋值
            if(newPath === '/look'){
                ZhuagnTai.value = '1'
            }else if(newPath === '/add'){
                ZhuagnTai.value = '2'
            }
        })
        // 跳转到精彩页面
        const GoBeautiful = ()=>{
            const load = ElLoad('正在跳转至精彩页面')
            setTimeout(()=>{
                load.close()
                router.push('/beautiful')
            },1000)
        }
        // 返回数据
        return{
            ZhuagnTai,
            GoBeautiful
        }
    }
}
</script>
<style lang="less" scoped>
    .body{
        width: 80%;
        height: 100%;
        margin: 0px auto;
        .body_one{
            margin: 20px auto;
            img{
                height: 100%;
                width: 100%;
            }
        }
        .body_two{
            width: 100%;
            height: 100px;
            margin-top: 50px;
            a{
                text-decoration: none;
            }
        }
    }

</style>
